<div class="modal-form">
<div class="column-right" style="width: 465px">

    <!-- Colour Tabbed Block (Full Width) -->
    <div class="block block-colour" style="margin-bottom:0px;">

        <!-- Block Header -->
        <div class="head">
            <div class="cap-left"></div>
            <div class="cap-right"></div>
            <div class="content">

                <!-- Block Title -->
                <h2><?php echo $this->translate('Select timezone');?></h2>
                <!-- /Block Title -->

                <!-- Block Icon (Don't include this with tabs) -->
                <a href="javascript:jQuery.fancybox.close();" title="" class="block-icon"><img src="/images/block-icons/stop.png" alt="<?php echo $this->translate('Close window');?>" title="<?php echo $this->translate('Close window');?>" width="32" height="32" /></a>
                <!-- /Block Icon (Don't include this with tabs) -->

            </div>
            <div class="clear-both"></div>
        </div>
        <!-- /Block Header -->

        <!-- Block Content -->
        <div class="block-content">

            <!-- Accordion -->
            <ul id="accordion-timezones" class="accordion">
<?php foreach($timezones as $continent => $zone) {
?>
                <li class="panel">
                    <h3 class="head"><a href="javascript:;" title=""><?php echo $continent; ?></a></h3>
                    <p class="content">
                        <?php
                        foreach($zone as $value) {
                          echo  $value['zone'] . '<br>';
                        }
                        ?>
                    </p>
                </li>
<?php
}
?>
            </ul>
            <!-- /Accordion -->

            <!-- Accordion JS -->
            <script type="text/javascript">
                $(document).ready(function() {
                    $('#accordion-timezones').Accordion({
                        active: 		'h3.selected',
                        header: 		'h3.head',
                        alwaysOpen: false,
                        animated: 	true,
                        showSpeed: 	300,
                        hideSpeed: 	300
                    });
                });
            </script>
            <!-- /Accordion JS -->

        </div>
        <!-- /Block Content -->

        <!-- Block Footer Cap -->
        <div class="block-footer-cap">
            <div class="cap-left"></div>
            <div class="cap-right"></div>
            <div class="content"></div>
        </div>
        <!-- /Block Footer Cap -->

    </div>
    <!-- /Colour Tabbed Block (Full Width) -->

</div>
<div class="clear-both"></div>
</div>
<!-- /Two Column (Equal) -->
</div>